<template>
	<view>
		<uni-popup ref="carpsw" type="center" zindex :isShow="isShow" :is-mask-click="false" @maskClick="maskClick">
			<view class="payPw" @tap.stop="">
				<view class="cu-bar-pwscon justify-between ctitle">
					<view class="modalTitle">
              {{props.title}}
              <view class="action" @tap="clickClose"><text class="cuIcon-close text-gray"></text></view>
          </view>
				</view>
				<!-- <view class="line"></view> -->
				<view class="money" v-if="props.type !== 'meal'">
					￥
					<text
						class="bigMoney">{{ payActivityData.activityPrice? payActivityData.activityPrice:totalPayMoney }}</text>
					<!-- <text>00</text> -->
					<text v-if="payActivityData.backMoney" class="info">(已减{{payActivityData.backMoney}}元)</text>
				</view>
				<view class="noti" v-if="props.type !== 'meal'">支付金额</view>

				<view class="code">
					<view class="code-box flex" @click="focus">
						<input class="passwordInput" type="number" :focus="isFocus" v-model="password"
							@input="passwordInput" @blur="isFocus=false" />
						<view class="code-box-item">{{ (password[0] && '✱') || '' }}</view>
						<view class="code-box-item">{{ (password[1] && '✱') || '' }}</view>
						<view class="code-box-item">{{ (password[2] && '✱') || '' }}</view>
						<view class="code-box-item">{{ (password[3] && '✱') || '' }}</view>
						<view class="code-box-item">{{ (password[4] && '✱') || '' }}</view>
						<view class="code-box-item">{{ (password[5] && '✱') || '' }}</view>
					</view>
				</view>
				<!-- <view class="dis text-center" v-if="props.type !== 'meal'">请输入6位数密码</view> -->
        <view class="forget-pwd flex justify-end " @click="mnavTo('/pages/user/passwordReset/passwordReset?phone=' + props.phone)">忘记密码?</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
  import { mnavTo } from '@/utils/helper';
	// import { onLoad } from '@dcloudio/uni-app';
	const props = defineProps({
		isShow: {
			type: Boolean,
			default: false,
		},
    phone:{
      type : String,
      default: '',
    },
    title:{
      type : String,
      default: '请输入电子卡支付密码',
    },
    type:{
      type : String,
      default: '',
    }
		// totalPayMoney:{
		// 	type: String||Number,
		// 	default:0
		// }

	});

	const emit = defineEmits(["maskClick", "confirm",'closeBtn'])

	const isFocus = ref(false)
	const carpsw = ref()
	const password = ref('')
	const payActivityData = ref<any>({})//支付活动
	const focus = () => {
		isFocus.value = !isFocus.value;
	}
	const passwordInput = (e) => {
		// isFocus.value = !isFocus.value;
		uni.vibrateShort();
		password.value = e.detail.value;
		if (password.value.length == 6) {
			isFocus.value = false;
			close();
			emit("confirm", password.value)
		}
	}
	const initData = () => {
		isFocus.value = true;
		password.value = ''
	}
	const totalPayMoney = ref(0)
	const open = (param : any) => {
		initData()
    if(props.type !== 'meal'){
      totalPayMoney.value = param.totalPayMoney || 0;
    }
		carpsw.value.open()
	}

	const maskClick = (e : any) => {
		// console.log('car-maskClick',e);
		emit("maskClick")
	}
	const close = () => {
		carpsw.value.close()
	}
	const clickClose = ()=>{
		carpsw.value.close()
		emit("closeBtn")
	}
	defineExpose({ open, close, initData })
</script>

<style lang="scss" scoped>
	//输入密码弹窗
	.payPw {
		background: #fff;
		margin-top: -210rpx;
		// top: -110rpx;
		width: 680rpx;
		border-radius: 20rpx;
    .forget-pwd{
      color: #999;
      font-size: 24rpx;
      font-weight: 400;
      padding: 20rpx 50rpx 80rpx 0;
    }
    .cu-bar-pwscon{
      position: relative;
      padding: 66rpx 0 36rpx;
    }
		.money {
			color: #2d2d2d;
			font-size: 44rpx;
			font-family: HiraginoSansGB-W3;
			text-align: center;
			// margin-top: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.bigMoney {
			font-size: 80rpx;
			font-weight: 700;
		}

		.noti {
			color: #606060;
			font-size: 28rpx;
			font-family: HiraginoSansGB-W3;
			text-align: center;
			line-height: 102rpx;
			margin: -20rpx auto 0;
			border-bottom: 1rpx solid #ededee;
      width: 570rpx;
		}

		.info {
			color: #999999;
			font-size: 20rpx;
			font-family: HiraginoSansGB-W3;
			// text-align: center;
			margin-left: 5rpx;
		}
    .action{
      position: absolute;
      left: 20rpx;
      top: 50%;
      transform: translateY(-50%);
      .cuIcon-close{
        font-size: 40rpx;
      }
    }
		.modalTitle {
			color: #333;
			font-size: 40rpx;
			font-weight: 400;
      text-align: center;
      position: relative;
		}

		.line {
			height: 1rpx;
			background-color: #2cad8d;
			width: 100%;
		}

		.code {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			padding: 30rpx 0 20rpx 0;
		}

		.code-box {
			justify-content: center;
			align-items: center;
			border: 1px solid #d0d0d0;
		}

		.code-box-item {
			width: 96rpx;
			height: 96rpx;
			background: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 40rpx;
		}

		.code-box-item:not(:last-child) {
			border-right: 1px solid #DFDFE1;
		}

		.passwordInput {
			position: absolute;
			width: 0;
			height: 0;
		}

		.dis {
			padding-bottom: 40rpx;
			font-size: 28rpx;
			color: #999;
		}
	}
	.ctitle {
		border-radius: 10rpx 10rpx 0 0;
	}
</style>